<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '分类列表',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">分类列表</text>
        </template>
        <template #left>
          <wd-icon name="chevron-left" class="text-gray-333 font-size-44"></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <wd-sticky :offset-top="61">
          <view class="flex justify-center items-center bg-#fff">
            <view class="wr-616 hr-70 rd-35 overflow-hidden flex justify-center items-center">
              <wd-search
                placeholder-left
                hide-cancel
                placeholder="输入关键词搜索"
                custom-class="search"
                v-model="getParams.keyword"
                @confirm="search"
              />
            </view>
            <view class="wr-46 hr-40 mg-l-32" @click="toShopCar">
              <image width="100%" height="100%" :src="shopCarIcon" mode="scaleToFill" />
            </view>
          </view>
        </wd-sticky>
        <view class="w-full">
          <wd-tabs v-model="tab" @change="tabChange">
            <block v-for="(item, index) in tabList" :key="index">
              <wd-tab :title="item.name">
                <view class="w-full flex justify-start items-center overflow-x-auto mg-t-32">
                  <view class="mg-r-34" v-for="(opt, j) in item.children" :key="j">
                    <view
                      class="wr-112 flex justify-start items-center flex-col"
                      @click="menuList(opt)"
                    >
                      <view class="w-full hr-112 rd-56 overflow-hidden">
                        <image width="100%" height="100%" :src="opt.pic" />
                      </view>
                      <view class="mg-t-20">
                        <text
                          class="font-size-24 font-400"
                          :class="{
                            'text-blue-1': getParams.subCateId == opt.id,
                            'text-gray-333': getParams.subCateId != opt.id,
                          }"
                        >
                          {{ item.name }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
        <view class="w-full flex justify-center">
          <view
            class="flex flex-1 justify-center items-center hr-80"
            v-for="(item, index) in filterParam"
            :key="index"
            @click="handleClickFilter(item.key, item)"
          >
            <text class="font-size-28" :class="{ 'text-blue-1': getParams.type == item.key }">
              {{ item.name }}
            </text>
          </view>
          <!-- <view
            class="flex flex-1 flex justify-center items-center mg-b-20"
            v-for="(item, index) in filterParam"
            :key="index"
          >
            <wd-button
              type="text"
              v-if="item.type === 0"
              @click="handleClickFilter(item.key, item)"
            >
              
            </wd-button>
            <wd-sort-button
              v-else
              :title="item.name"
              v-model="item.value"
              @change="handleClickFilter(item.key, item)"
            />
          </view> -->
        </view>
        <!-- 产品列表 -->
        <view class="mg-b-32">
          <view class="flex flex-wrap justify-between">
            <view
              class="flex justify-center flex-col mg-b-34 wr-336"
              v-for="(item, index) in productList"
              :key="index"
              @click="toProductDetail(item.id)"
            >
              <view class="w-full hr-336">
                <image width="100%" height="100%" :src="item.pic" />
              </view>
              <view class="font-size-28 mg-t-20 font-500 text-truncate">{{ item.name }}</view>
              <view class="flex justify-between flex-items-end mg-t-20">
                <view class="flex justify-start flex-items-end font-size-36 mt-1 text-red-1">
                  <view class="line-height-none font-size-24 mg-r-6 mg-b-4">¥</view>
                  <view class="line-height-none">
                    {{ item.price }}
                  </view>
                </view>
                <view class="font-size-24 text-gray-999">已售{{ item.buy_count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCateConfig, getGoodList } from '@/service/shop/shop'

defineOptions({
  name: 'ShoppingList',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 产品列表
const productList: Ref<any[]> = ref([])
const shopCarIcon: any = ref('../../static/tabbar/shopHL.png')
const toProductDetail = (id: number) => {
  uni.navigateTo({ url: '/pages/shopping/details' + '?id=' + id })
}
const handleClickLeft = () => {
  uni.navigateBack()
}
const tab: any = ref(0)
const tabList: any = ref([])
onLoad(() => {})
const filterParam: any = ref([
  {
    name: '综合',
    key: 0,
    value: '0',
    type: 0,
  },
  {
    name: '销量',
    key: 1,
    value: '1',
    type: 0,
  },
  {
    name: '价格',
    key: 2,
    value: '2',
    type: 0,
  },
])
onShow(() => {
  getData()
})
const getData = () => {
  tabList.value = []
  const findLeavel = (data: any, id: number) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      if (item.id === id) {
        return item
      }
      if (item.children) {
        const result = findLeavel(item.children, id)
        if (result) {
          return result
        }
      }
    }
    return null
  }
  getCateConfig().then((res: any) => {
    if (res.data) {
      for (let i = 0; i < res.data.length; i++) {
        const item: any = res.data[i]
        const levalItem: any = findLeavel(tabList.value, item.parent_id)
        if (levalItem) {
          levalItem.children.push(item)
        } else {
          item.children = []
          tabList.value.push(item)
        }
      }
      if (tabList.value.length > 0) {
        const firstLeave: any = tabList.value[0].id
        getParams.value.cateId = firstLeave
        if (tabList.value[0].children.length > 0) {
          const firstSubCate: any = tabList.value[0].children[0].id
          getParams.value.subCateId = firstSubCate
        }
      }
      getProductList()
    }
  })
}
const tabChange = (ev: any) => {
  const index: any = ev.index
  const item: any = tabList.value[index]
  getParams.value.cateId = item.id
  getProductList()
}
const getProductList = () => {
  getGoodList(getParams.value).then((res: any) => {
    if (res.data) {
      productList.value = res.data.data
    }
  })
}
const getParams: any = ref({
  cateId: 0, // 一级分类ID 选填
  subCateId: 0, // 二级分类ID 选填
  keyword: '', // 一级分类ID 选填
  type: 0, // 搜索类型:0=综合,1=价格2=销量
  page: 1, // 页码
  pageSize: 10, // 选填
})
const handleClickFilter = (key: number, item: any) => {
  getParams.value.type = key
  getProductList()
}
const menuList = (item: any) => {
  getParams.value.subCateId = item.id
  getProductList()
}
const toShopCar = () => {
  uni.switchTab({ url: '/pages/home/shopping' })
}
const search = () => {
  getParams.value.keyword = getParams.value.keyword.trim()
  getProductList()
}
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
::v-deep .wd-tabs__nav-item {
  font-size: 28rpx !important;
  color: #312f2a !important;
}
::v-deep .wd-tabs {
  background-color: #f6f6f8;
}
::v-deep .wd-tabs.is-slide .wd-tabs__nav-item {
  padding: 0 30rpx;
}
::v-deep .wd-search {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #f5f6f7 !important;
}
::v-deep .wd-swiper__track {
  border-radius: 0;
}
</style>
